<template>
  <div id="main" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById('main'))
      const categories = (function() {
        let now = new Date()
        const res = []
        let len = 10
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
          now = new Date(+now - 2000)
        }
        return res
      })()
      const categories2 = (function() {
        const res = []
        let len = 10
        while (len--) {
          res.push(10 - len - 1)
        }
        return res
      })()
      const data = (function() {
        const res = []
        let len = 10
        while (len--) {
          res.push(Math.round(Math.random() * 1000))
        }
        return res
      })()
      const data2 = (function() {
        const res = []
        let len = 0
        while (len < 10) {
          res.push(+(Math.random() * 10 + 5).toFixed(1))
          len++
        }
        return res
      })()
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#84fab0' // 0% 处的颜色
              }, {
                offset: 1, color: '#8fd3f4' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }

        },
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#84fab0' // 0% 处的颜色
          }, {
            offset: 1, color: '#8fd3f4' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: categories
          },
          {
            type: 'category',
            boundaryGap: true,
            data: categories2
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: 'Search volume',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: 'value',
            scale: true,
            name: '实时搜索量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '实时搜索量',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data
          },
          {
            name: '新增用户',
            type: 'line',
            data: data2
          }
        ]
      }
      app.count = 11
      setInterval(function() {
        const axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
        data.shift()
        data.push(Math.round(Math.random() * 1000))
        data2.shift()
        data2.push(+(Math.random() * 10 + 5).toFixed(1))
        categories.shift()
        categories.push(axisData)
        categories2.shift()
        categories2.push(app.count++)
        myChart.setOption({
          xAxis: [
            {
              data: categories
            },
            {
              data: categories2
            }
          ],
          series: [
            {
              data: data
            },
            {
              data: data2
            }
          ]
        })
      }, 2100)
      myChart.setOption(option)
    }
  }
}
</script>
